<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedViews">
      <component
        :is="Component"
        :key="`${($route as TypeObject).name}-${routerKey}`"
      />
    </keep-alive>
  </router-view>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';

import { useRoute } from 'vue-router';

import { useAppStore } from '@/store/app';
import { useKeepAliveStore } from '@/store/keep-alive';

const appStore = useAppStore();
const keepAliveStore = useKeepAliveStore();
const routerKey = computed(() => appStore.currentDate);
const cachedViews = computed(() => keepAliveStore.cachedViews);
const route = useRoute();

watch(
  route,
  (newRoute) => {
    if (newRoute.name && newRoute.meta && newRoute.meta.keepAlive) {
      keepAliveStore.addCacheOnly(newRoute);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
